<template>
  <ele-table-select
    ref="select"
    :clearable="true"
    size="small"
    :value="value"
    placeholder="请选择"
    value-key="id"
    label-key="name"
    prefix-icon="el-icon-search"
    :table-config="tableConfig"
    @select="updateValue"
  >
    <!-- <template v-slot:toolbar>
      <div style="max-width: 200px">
        <el-input
          clearable
          size="small"
          v-model="where.keywords"
          placeholder="输入关键字搜索"
          prefix-icon="el-icon-search"
          @change="search"
        />
      </div>
    </template> -->

    <template v-slot:issue_type="{ row }">
      <ele-dot
        v-if="row.issue_type == 1"
        type="warning"
        effect="plain"
        text="满减券"
        :ripple="true"
      />
      <ele-dot
        v-if="row.issue_type == 2"
        type="success"
        effect="plain"
        text="折扣券"
        :ripple="true"
      />

      <ele-dot
        v-if="row.issue_type == 3"
        type="success"
        effect="plain"
        text="实物券"
        :ripple="true"
      />
    </template>

    <template v-slot:deductible_amount="{ row }">
      <div class="ele-cell" v-if="row.issue_type == 1">
        <div class="ele-cell-content">
          <div class="ele-cell-title"
            >满{{ row.satisfy_amount }}减 {{ row.deductible_amount }}</div
          >
        </div>
      </div>


      <div class="ele-cell" v-if="row.issue_type == 2">
        <div class="ele-cell-content">
          <div class="ele-cell-title"
            >满{{ row.satisfy_amount }}抵扣 {{ row.deductible_amount }}</div
          >
        </div>
      </div>


      <div class="ele-cell" v-if="row.issue_type == 3">
        <div class="ele-cell-content">
          <div class="ele-cell-title">实物券</div >
        </div>
      </div>


    </template>
  </ele-table-select>
</template>

<script>
import { indexList } from '@/api/consumer';
export default {
  name: 'Pages',
  props: {
    // 修改回显的数据
    value: undefined
  },
  data() {
    return {
      // 搜索表单
      where: {
        keywords: '',
        
      },
      tableConfig: {
        datasource: ({ page, limit, where, order }) => {
          return indexList({ ...where, ...order, page, limit });
        },
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center'
          },
          {
            prop: 'satisfy_amount',
            label: '消费券',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'issue_type',
            label: '抵扣类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 50,
            slot: 'issue_type'
          },
          {
            prop: 'deductible_amount',
            label: '价格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            slot: 'deductible_amount'
          },
        
        ],
        pageSize: 3,
        pageSizes: [3, 10, 20, 30, 40, 50, 100],
        rowClickChecked: true,
        rowClickCheckedIntelligent: false,
        toolkit: ['reload', 'columns'],
        size: 'small',
        toolStyle: { padding: '0 10px' }
      }
    };
  },
  methods: {
    updateValue(data) {
      this.$emit('done', data);
    },
    // 搜索
    search(where) {
      this.$refs.select.reload({
        where: where,
        page: 1
      });
    }
  }
};
</script>
